<!-- 柱状图（右） -->
<template>
  <div class="course-histogram">
    <div class="title">
      首次进入课程成功率
    </div>
    <div class="histogram" ref="chart">

    </div>
  </div>
</template>

<script>
export default {
  props:['histogram'],
  //图表实例
  mounted() {
    this.init()
  },
  methods: {
    init() {
      //2.基于准备好的dom，初始化echarts实例
      let chart = this.$echarts.init(this.$refs.chart);
      //3.配置数据
      let option = {
        grid: {
          left: '5%',
          right: '5%',
          bottom: '15%',
          top:'10%',
          containLabel: true
        },
        legend: {
          orient: 'horizontal',
          right: 'center',
          bottom:5
        },
        xAxis: {
          type: 'category',
          data: this.histogram.xAxisdata 
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name:'否',
            data: this.histogram.seriesNo,
            type: 'bar',
            stack: 'total',
            barWidth: 15,
            color: '#5bacad'
          },
          {
            name:'是',
            data: this.histogram.seriesYes,
            type: 'bar',
            stack: 'total',
            color: '#c39155',
            barWidth: 15
          }
        ],
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(50,50,50,0.7)',
          borderColor: 'rgba(50,50,50,0.7)',
          // formatter: '{a0}--{b0}--{c0}--{a1}--{b1}--{c1}',
          valueFormatter: (value) => value,
          textStyle: {
            color: '#fefdfd'
          }
        },
      };
      // 4.传入数据
      chart.setOption(option);

      // 在有些场景下，我们希望当容器大小改变时，图表的大小也相应地改变。
      window.onresize = function () {
        chart.resize()
      }
    }
  }
};
</script>

<style lang="less" scoped>
.course-histogram {
  width: 100%;
  height: 280px;
  background-color: #ffffff;

  .title {
    height: 40px;
    line-height: 40px;
    padding-left: 8px;
    padding-right: 30px;
    color: rgb(85, 85, 85);
    text-align: left;
    font-size: 14px;
  }

  .histogram {
    height: 240px;
  }
}
</style>